<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 3、新建一个元素，元素Vue绑定的 -->
    <div id="app">
        <!-- 4、模板语法 来引用对象中的数据{{}} -->
        <h1>1、变量：{{msg}}</h1>
        <h1>2、字符串：{{"123"}}</h1>
        <!-- <h1>3、文本：{{哈哈}}</h1> 会报错-->
        <h1>文本</h1>
        <!-- <h1>4、布尔值：{{bool?true:false}}</h1>没有在data里定义会报错，返回为false -->
        <h1>4、bool:{{bool}}</h1>
        <h1>5、调用方法：{{msg.split('').reverse().join('')}}</h1>
    
        <!--语句 不可以的 -->
        <!-- <h1>{{if(bool){console.log(123)}}}</h1> 会报错-->
    </div>
    <!-- 1、引入vue的依赖 -->
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script>
        // 2、引入一个全局的对象Vue
        // console.log(Vue);
        let vm=new Vue({
            // 2.1
            el:"#app",// el:Vue对象要绑定的元素
            data:{// Vue对象元素的数据
                bool:true,
                msg:"hello Vue!"
            }

        })
    </script>
</body>
</html>